cascading style sheets guide

Getting down to business

Enough scene setting, time to start making style sheets work.

Last time, in How Do Style Sheets Work? we saw that a style sheet is a series of statements. There are several types of statement.

We'll take a quick look at each of these, but the really important one for us is Rules, which we leave for last.

@Rules

You can think of an @rule as a kind of macro instruction that tells a browser something other than how to draw elements. For our purposes (in CSS1 and CSSP) the only valid @rule is the @import rule. @import tells a browser to import a style sheet from elsewhere and use it in conjunction with the current style sheet. A style sheet with an @import rule is said to cascade from the imported style sheet. This is how the cascade that we saw in Cascading and Inheritance works.

The @import rule has the following format

@import url(http://www.westciv.com/styles/style1);

alternatively, you can use the form

@import "http://www.westciv.com/styles/style1";

The url can be either a local file (in that case you use a relative url) or an absolute url, as in this case.

Comments

Because human beings have to develop, edit and share style sheets, they can be commented. A comment has the form

/* This is a style sheet comment*/

Comments can be multi-lined.

HTML Comment Tags

Because older browsers don't support cascading style sheets, to ensure that these browsers don't display a style sheet embedded in them as text, style sheets can include HTML comment tags ( ). You needn't really worry about these.

Rules

Rules or Rule Sets are what we are primarily concerned with. A rule is a statement that tells a browser how to draw a particular element on a web page.
A rule has two parts, a Selector and a Declaration. We are going to look in detail as each of these, as understanding both is essential to working with style sheets.

A selector identifies, or selects the elements on a web page that are affected by the rule.
The declaration then tells a browser how to draw any element on a page that is selected by the selector.

Sounds a little complicated? Its a tricky idea, because it is probably quite different to your experience with style sheets in say a word processor.

Let's take a look at an example or two.

One of the most common elements on a web page is a paragraph. If you are versed in HTML, this is the <P></P> element. A very simple rule could tell a browser how to draw a paragraph.
Suppose we want all of the text in paragraphs to be in the font you are (hopefully) seeing now, verdana. In a style sheet, we want to create a rule which selects paragraphs, or to put it another way, we want to create a paragraph selector. Sounds complicated? Well, below is the paragraph selector

Any guesses for the selector to select the body of a document. If you guessed BODY (or body) you were right. Quite simply, it is the tag for that element, minus the < and >.

In addition to selectors for HTML elements (HTML Element Selectors) there are several other important types of selector, which we will be covering in the next section.

Now, our plan was to create a rule that tells a browser to draw paragraphs in a certain font. We've create the selector, but now we need to create a declaration that tells the browser how to draw the selected elements.

Declarations are inside curly braces - { and }, and contain one or more properties, separated by semicolons. In our example, the declaration would be

{font-family: verdana}

And if we were to get really ambitious, and want the text to be red, we would have a declaration like the following

{font-family: verdana; color: red}

Putting the selector and the declaration together, we get the complete statement

P {font-family: verdana; color: red}

In this part

In this lesson we took a look at the major building blocks of a style sheet, the different types of statement. We paid a bit of attention to the most important kind of statement, rules, and saw how a rule has a selector which identifies the elements on a page, and a declaration, a set of properties that tells a browser how to draw the selected elements.

If you feel that we raced through this a little, then you are right. We are going to focus a good deal more on both selectors, and properties, in coming lessons.

Next we are going to take a good hard look at Selectors, how they work, and how to use them.